<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>提交反馈</el-breadcrumb-item>
      <el-breadcrumb-item>设备报修</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>

      <el-form ref="form" label-width="100px">

        <el-form-item label="报修会议室：">
          <el-select v-model="value" placeholder="请选择会议室">
                <el-option
                v-for="item in roomList"
                :key="item.roomId"
                :label="item.roomNo"
                :value="item.roomId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="报修设备：" size="mini">
          <div class="tag">
            <el-radio v-model="radio" label="1">空调</el-radio>
          </div>
          <div class="tag">
            <el-radio v-model="radio" label="2">投影仪</el-radio>
          </div>
        </el-form-item>

        <el-form-item label="报修内容：" prop="repairContent">
          <el-input type="textarea" v-model="input" placeholder="请输入故障描述"></el-input>
        </el-form-item>

        <el-form-item label="上传图片：">
          <el-upload class="upload" ref="upload" action="string" :file-list="fileList" :auto-upload="false"
            :http-request="uploadFile" :on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove"
            multiple="multiple" list-type="picture">
            <el-button slot="trigger" size="small" type="primary" @click="delFile">
              选取图片
            </el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交报修</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  data () {
    return {
      roomList: [],
      value: '',
      fileList: [],
      multiple: false,
      radio: 0,
      input: ''
    }
  },
  created () {
        this.getRoomList()
    },
  methods: {
    async getRoomList () {
            const { data: res } = await this.$http.get('/rooms')
            if (res.code !== 100) {
                return this.$message.error('获取会议室列表失败！')
            } else {
                this.roomList = res.extend.result
            }
        },
    delFile () {
      this.fileList = []
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    uploadFile (file) {
      this.formData.append('file', file.file)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    async onSubmit () {
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      formData.append('equip', this.radio)
      formData.append('msg', this.input)
      formData.append('id', this.value)
      const { data: res } = await this.$http.post('/repair', formData)
      if (res.code !== 100) {
          return this.$message.error('提交失败！')
      } else {
          this.fileList = []
          this.radio = 0
          this.input = ''
          this.value = ''
          return this.$message.success('报修成功，后勤人员即将处理！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
    @disabledColor: #c8c9cc; //not-allowd颜色
    @hourColor: fadeout(@themeColor, 80%); //时间滚条颜色
    @markLineColor: #f76262; //markline颜色
    @baseColor:#66b1ff;//基础色，比如border
    @themeColor:@baseColor;//主题颜色
    @fontColor:#606266;
    @roomTopSideW: 120px;
    @baseBorder: 1px solid @baseColor;
    @barGridH: 25px;
    @roomTopSideW: 120px;
    @sumW: 900px;
    @topRightW: @sumW - @roomTopSideW;
    @gridW: (@topRightW - @barGridH - @barGridH) / 24;
    @gridH: @gridW;
    @themeColor2:@baseColor;//日期选中颜色
    .tag {
        display: inline-block;
    }

    .el-tag {
        margin: 0 56px;
    }

    .el-radio {
        margin: 0 56px;
    }

    .el-form {
        width: 500px;
        margin: 25px auto;
    }

    .resRoomPluginBox {
        width: 900px;
        margin: 0 auto;
    }

    .resHead {
        display: flex;

        .identifyLst {
            display: flex;
            justify-content:flex-end;
            flex: 1;

            .identify {
                padding: 8px 0;
                margin-left: 10px;

                i {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background-color: @disabledColor;
                    position: relative;
                    top: 3px;
                    box-sizing: border-box;
                }

                i.nooccupy {
                    background-color: #fff;
                    border: 1px solid @disabledColor;
                }

                i.select {
                    background-color: @themeColor;
                }

                span {
                    font-size: 12px;
                    margin-left: 2px;
                    color: @fontColor;
                }
            }
        }
    }

    .roomRerservation {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    .roomTop {
        width: 100%;
        height: 70px;
        display: flex;
    }

    .roomTopSide {
        width: @roomTopSideW;
        border: @baseBorder;
        box-sizing: border-box;
        position: relative;
        height: 100%;
        left: -1px;

        &:before {
            content: "";
            position: absolute;
            left: 14px;
            top: -16px;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1.5px solid @baseColor;
            transform-origin: center center;
            transform: rotateZ(30deg) scale(1.16);
        }

        .titleTime,
        .titleName {
            position: absolute;
            font-size: 14px;
            color: @fontColor;
        }

        .titleName {
            bottom: 13px;
            left: 14px;
        }

        .titleTime {
            top: 13px;
            right: 20px;
        }
    }

    .roomTopTime {
        flex: 1;
        height: 100%;
    }

    .roomDate {
        height: calc(100% - @barGridH);
        display: flex;
        background-color: #fff;
        margin-right: -1px;
        margin-left: -1px;

        .dateItem {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            text-align: center;
            box-sizing: border-box;
            border: @baseBorder;
            height: 100%;
            cursor: pointer;
            color: @fontColor;
        }

        .dateItem.active {
            background-color: @themeColor2;
            color: #fff;
        }
    }

    .roomTopHour {
        height: @barGridH;
        display: flex;
        margin-left: -1px;
        margin-right: -1px;

        .hourNavItem {
            flex: 1;
            width: calc(100% / 5);
            height: @barGridH;
            line-height: @barGridH;
            text-align: center;
            box-sizing: border-box;
            border: @baseBorder;
            font-size: 13px;
            background-color: @hourColor;
            color: @fontColor;
        }
    }

    .roomLine {
        width: 100%;
        height: 30px;
        display: flex;
    }

    .roomName {
        width: @roomTopSideW;
        border: @baseBorder;
        box-sizing: border-box;
        position: relative;
        left: -1px;
        line-height: 30px;
    }

    .roomStatus {
        flex: 1;
        height: 100%;
    }

    .roomGrid {
        height: 100%;
        display: flex;
        margin-left: -1px;
        margin-right: -1px;

        .roomItem {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            text-align: center;
            box-sizing: border-box;
            border: @baseBorder;
            height: 100%;
            cursor: pointer;
            color: @fontColor;
        }

        .roomItem.isOccupy {
            background-color: @disabledColor;
            cursor: not-allowed;
        }

        .roomItem.isSelected {
            background-color: @themeColor;
        }
    }
</style>
